{% block demo %} {% endblock %}

<div class="list-group tags" >
	<div class="list-group-item active">
		<span class="badge">{{data['tags']|length}}</span>
		<p class="list-group-item-text">FILTER <INPUT class="filter"></p>
	</div>
	<div class="list-group-item">
{% for tag in data["tags"] %}
<a class="label label-default label-info" data-id="{{tag.id}}">{{tag.name}}</a>
{% endfor %}

{% for tag in data["othertags"] %}
<a class="label label-default" data-id="{{tag.id}}">{{tag.name}}</a>
{% endfor %}
	</div>

</div>

<script>
	$(".tags .filter").on("input propertychange",function(){
		var f=$(this).val(); //本地过滤
		//console.log(f);[href^='sql]
		$(".tags .label:contains('"+f+"')").show();
		$(".tags .label:not(:contains('"+f+"'))").hide();
	});
	$(".tags .label").on("click",function(){
		//TODO:sync the tags in the main list
		var tagid=$(this).data("id");
		var self=$(this);
		var count=$(".tags .label-info").length;
		if($(this).hasClass("label-info")){
			//post and remove on : no url_for in client... 
			postJson("item_tags/{{data.item.id}}/"+tagid+"/off",function(){
				self.removeClass("label-info");
				$(".tags .badge").text(count-1);
			}); 
		}
		else {
			//post and add on
			postJson("item_tags/{{data.item.id}}/"+tagid+"/on",function(){
				self.addClass("label-info");
				$(".tags .badge").text(count+1);
			});
		}
	});
</script>
